<template>
	<view class="draft" @click="toDetail(item)">
		<view class="pic">
			<image :src="item.image||''" mode="widthFix"></image>
		</view>
		<view class="goods">
			<view class="goods-item title v-ellip-2">[{{item.id}}]{{item.store_name||''}}</view>
			<view class="goods-item item price" v-if="item.cate_names">分类：<text>{{item.cate_names||''}}</text></view>
			<view class="goods-item item price" v-if="item.mType">工序：<text>{{item.mType.title||''}}</text></view>
<!-- 			<view class="goods-item flex">
				<view class="status s1" v-if="item.is_show == 1">已上架</view>
				<view class="status s0" v-else>未上架</view>
			</view> -->

			<view class="goods-item item price">出售价格：<text>￥{{item.price||''}}</text></view>
			<view class="goods-item item piece">剩余库存：<text>{{item.stock||''}} 件</text></view>
			<!-- <view class="item sales">已售数量：<text>38 件</text></view> -->
		</view>
		<view class="btn publish" :class="item.is_show?'bg-primary border-primary':'bg-warning border-warning'" @click.stop="setShow(index)">{{item.is_show?'下 架':'上 架'}}</view>
		<view class="btn" @click.stop="form(item.id)">编 辑</view>
	</view>
</template>

<script>
	let that;
	import tool from "@/extend/tool.js";
	export default{
		props:{
			index:{
				type: Number,
				default: 0
			},
			item:{
				type: Object
			}
		},
		mounted(){
			that = this;
		},
		methods:{
			// 编辑
			form(id){
				that.$tool.navto("/pages/other/draft/draft_form?id="+id);
			},
			// 上下架
			setShow:tool.debounce(index=>{
				that.$emit("setShow", index);
			}),
			toDetail(item){
				// var userinfo = JSON.stringify(item)
				let id = item.product_id || item.id
				// console.log("item=====",item)
				// this.$tool.navto(`/pages/goods_details/index?id=${id}&userinfo=${userinfo}`);
				that.$tool.navto("/pages/goods_details/index?id="+id);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.draft{
		width: 720rpx;
		display: flex;
		justify-content: start;
		background-color: #ddd;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		position: relative;
		.pic{
			width: 20%;
			image{
				width: 100%;
				border-radius: 20rpx;
			}
		}
		.goods{
			font-size: 30rpx;
			margin-left: 20rpx;
			width: 80%;
			.goods-item{
				margin-bottom: 10rpx;
				&:last-child{
					margin-bottom: 0;
				}
			}
			.status{
				width: 120rpx;
				text-align: center;
				padding: 5rpx 0;
				border-radius: 8rpx;
				margin-right: 10rpx;
				&.s0{
					color: #fff;
					background-color: $uni-color-warning;
				}
				&.s1{
					color: #fff;
					background-color: $uni-color-primary;
				}
				&.s2{
					color: #fff;
					background-color: $uni-color-error;
				}
				&.s3{
					color: #fff;
					background-color: $uni-color-success;
				}
				
			}
			.title{
				width: 100%;
				font-weight: bold;
				font-size: 34rpx;
			}
			.item{
				width: 70%;
				text{
					color: #999;
				}
			}

		}
		.btn{
			position: absolute;
			padding: 10rpx 20rpx;
			border: 1px solid #999;
			border-radius: 40rpx;
			bottom: 20rpx;
			right: 140rpx;
			&.publish{
				right: 20rpx;
			}
		}
		


	}
</style>